import 'package:easy_refresh/easy_refresh.dart' hide Header;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:todo_app/components/TextExt.dart';
import 'package:todo_app/components/UserNameAvatar.dart';
import 'package:todo_app/controllers/GroupController.dart';
import 'package:todo_app/controllers/TodoController.dart';
import 'package:todo_app/controllers/definitions/GroupModel.dart';
import 'package:todo_app/controllers/definitions/TodoModel.dart';
import 'package:todo_app/controllers/definitions/UserModel.dart';
import 'package:todo_app/hooks/EasyRefreshController.dart';
import 'package:todo_app/layout/Gaps.dart';
import 'package:todo_app/layout/Header.dart';
import 'package:todo_app/layout/ListItem.dart';
import 'package:todo_app/layout/Space.dart';
import 'package:todo_app/pages/todo/components/TodoWidget.dart';
import 'package:todo_app/pages/todo/todo-publish-page.dart';
import 'package:todo_app/utils/AppNavigator.dart';

class GroupDetailPage extends HookWidget {
  const GroupDetailPage({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var todoList = useState<List<TodoModel>>([]);
    var userList = useState<List<UserModel>>([]);
    var detail = useState<GroupModel?>(null);
    var controller = useEasyRefreshController();
    var refreshKey = useState<int>(0);

    var pathParameters = GoRouterState.of(context).pathParameters;
    var id = pathParameters["id"] ?? "";

    useEffect(() {
        (() async {
          TodoController.listByGroupIdUsingGet(id).then((res) {
            if(res.status == 'success') {
              todoList.value = res.data ?? [];
            }
          });
          GroupController.usersUsingGet(id).then((res) {
            if(res.status == 'success') {
              userList.value = res.data ?? [];
            }
          });
          GroupController.detailUsingGet(id).then((res) {
            if(res.status == 'success') {
              detail.value = res.data;
            }
          });
        })();

      return () { };
    }, [refreshKey.value]);

    return Scaffold(
      appBar: Header(
        title: detail.value?.group_name ?? "分组详情",
      ),
      body: Column(
        children: [
          ListItem(
            title: TextExt.desc("成员", lineHeight: 1),
            margin: EdgeInsets.only(top: 12.dp, bottom: 4.dp),
            actions: [TextExt.desc("管理", lineHeight: 1)],
            nextIcon: true,
            onTap: () {
                AppNavigator.pushNamed('groupUsers', params: {
                  "id": id
                });
            },
          ),
          Row(
            children: [
              Expanded(
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Space(
                    children: userList.value.map<Widget>((user) {
                      return GestureDetector(
                        onTap: () {
                          AppNavigator.pushNamed('personDetail', params: {
                            "id": user.id.toString()
                          });
                        },
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            UserNameAvatar(username: user.nickname ?? user.realname ?? "", size: 44.dp),
                            Container(
                              margin: EdgeInsets.only(top: 5.dp),
                              child: TextExt.body(user.nickname ?? user.realname ?? "", fontSize: 14.dp)
                            )
                          ],
                        ),
                      );
                    }).toList(),
                  ),
                )
              )
            ],
          ),
          ListItem(
            title: TextExt.desc("待办事项", lineHeight: 1),
            actions: [TextExt.desc("添加", lineHeight: 1)],
            margin: EdgeInsets.only(top: 15.dp, bottom: 10.dp),
            nextIcon: true,
            onTap: () {
              if(detail.value != null) showPublishTodo(context, detail.value!);
            },
          ),
          Expanded(
            child: EasyRefresh(
              controller: controller,
              onRefresh: () {
                refreshKey.value += 1;
              },
              child: ListView(
                children: todoList.value.map<Widget>((todo) => TodoWidget(todo: todo)).toList()
              )
            )
          )
        ],
      ),
    );
  }
}